import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { getUserInfoApi } from "@/api";
import { useUserStore } from '@/store/userStore'

import LoginVue from '../views/Login/index.vue'
import HomeVue from '../views/Home/home.vue'
import { processMenu } from '@/common';
import { ElMessage } from 'element-plus';
// import AdminVue from '@/views/ums/admin.vue'
// import RoleVue from '@/views/ums/role.vue'

const routes: RouteRecordRaw[] = [
  { path: '/login', component: LoginVue },
  // {
  //   path: '/home', component: HomeVue, children: [
  //     // 现在不能把admin和role的路由写死，因为这样不安全 ， 这部分的路由，需要动态生成 ， 需要用到的 技术 点： router.addRoute
  //     // { path: 'admin', component: AdminVue },
  //     // { path: 'role', component: RoleVue },
  //   ]
  // }
  {
    path: '/',
    component: HomeVue,
    redirect: '/index',
    children: [
      { path: 'index', component: () => import('../views/Home/index.vue') }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// 试试router.addRoute
// router.addRoute({ path: '/admin', component: AdminVue })

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  let token = localStorage.getItem('token');
  // 当 已经登录，并且 没有 用户的路由数据的时候，才需要发请求
  if (token && userStore.menuData.length == 0) {
    getUserInfoApi().then(res => {
      if (res.code === 200) {
        // 把请求回来的 菜单存储到 pinia
        userStore.menuData = res.data.menus;
        userStore.username = res.data.username;

        // 还要把 res.data.menus 变成双层结构
        const result = processMenu(res.data.menus)
        // 遍历 result 动态生成路由
        result.forEach(item => {
          // 以权限/商品/订单/营销为上层，进行功能的分类， 上层就是 父路由 --> 分组
          const route: RouteRecordRaw = {
            path: '/' + item.name,
            component: HomeVue,
            name: item.name,
            children: []
          }
          // 再把所有的子级路由都添加进去
          item.children.forEach((child) => {
            route.children.push({
              name: child.name,
              // 判断一下是否需要id，如果需要，修改为动态路由传递参数
              path: child.name.includes('alloc') ? child.name + '/:id' : child.name,
              // import 导入的路径是  
              component: () => import(`../views/${item.name}/${child.name}.vue`)
            })

          })
          // 把父子级路由添加进去 - 添加路由是异步的
          router.addRoute(route);
        })

        // router.getRoutes() 用来获取所有已经可以使用的路由的
        // console.log(router.getRoutes())

        // next如果传递参数，会重新进入 beforeEach
        next(to.fullPath);
      }
    })
  } else if (token && to.path == '/login') {
    // 如果在登录的情况下，想要访问 登录页面的话， 不允许
    ElMessage.error('请先退出登录');
    // 回到之前的页面
    next(from.fullPath);
  } else {
    next()
  }
})

export default router;